﻿@page "/chart/recurrence-strip-line"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the world pollution report with the default column series in the chart and the stripline repeated.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the stripline support. You can use the <code>ChartStripline</code> option to enable the stripline. To repeat the stripline, you need to set <code>StartFromAxis</code>, <code>Size</code>, <code>IsRepeat</code>, and <code>RepeatEvery</code> properties accordingly.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the stripline can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/strip-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-md-8 sb-property-border">
    <SfChart Title="World Pollution Report" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis Interval="5" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Minimum="new DateTime(1965,1,1)" Maximum="new DateTime(2010,1,1)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartStriplines>
                <ChartStripline Visible="@XAxis" StartFromAxis="true" Size="5" SizeType="SizeType.Years" IsRepeat="true" RepeatEvery="10" Color="rgba(167,169,171, 0.1)"></ChartStripline>
            </ChartStriplines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="18000" Interval="2000">
            <ChartAxisMajorGridLines Color="rgba(167,169,171, 0.3)"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartStriplines>
                <ChartStripline StartFromAxis="true" Size="2000" IsRepeat="true" RepeatEvery="4000" Visible="@YAxis" Color="rgba(167,169,171, 0.1)"></ChartStripline>
            </ChartStriplines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries Name="All sources" Type="ChartSeriesType.Column" DataSource="@PollutionReports" XName="Period" YName="PollutionRate1" Width="2"></ChartSeries>
            <ChartSeries Name="Autos & Light Trucks" Type="ChartSeriesType.Column" DataSource="PollutionReports" XName="Period" YName="PollutionRate2" Width="2"></ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true" Format=" Year: ${point.x}<br> Tons Per Day: ${point.y}"></ChartTooltipSettings>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 80%">
                        X Axis Striplines:
                    </td>
                    <td>
                        <SfCheckBox Checked="@XAxis" ValueChange="@CheckedXAxis" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 80%">
                        Y Axis Striplines:
                    </td>
                    <td>
                        <SfCheckBox Checked="@YAxis" ValueChange="@CheckedYAxis" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StripLineData> PollutionReports { get; set; } = new List<StripLineData>
    {
        new StripLineData { Period = new DateTime(1970, 1, 1), PollutionRate1 = 16500, PollutionRate2 = 8000 },
        new StripLineData { Period = new DateTime(1975, 1, 1), PollutionRate1 = 16000, PollutionRate2 = 7600 },
        new StripLineData { Period = new DateTime(1980, 1, 1), PollutionRate1 = 15400, PollutionRate2 = 6400 },
        new StripLineData { Period = new DateTime(1985, 1, 1), PollutionRate1 = 15800, PollutionRate2 = 3700 },
        new StripLineData { Period = new DateTime(1990, 1, 1), PollutionRate1 = 14000, PollutionRate2 = 7200 },
        new StripLineData { Period = new DateTime(1995, 1, 1), PollutionRate1 = 10500, PollutionRate2 = 2300 },
        new StripLineData { Period = new DateTime(2000, 1, 1), PollutionRate1 = 13300, PollutionRate2 = 4000 },
        new StripLineData { Period = new DateTime(2005, 1, 1), PollutionRate1 = 12800, PollutionRate2 = 4800 }
    };
    private Boolean XAxis = true, YAxis = true;

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private void CheckedXAxis(ChangeEventArgs<bool> args)
    {
        XAxis = args.Checked;
    }

    private void CheckedYAxis(ChangeEventArgs<bool> args)
    {
        YAxis = args.Checked;
    }

    public class StripLineData
    {
        public DateTime Period { get; set; }
        public double PollutionRate1 { get; set; }
        public double PollutionRate2 { get; set; }
    }
}
